<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

<!-- WebPlot.html

	Copyright Creare Inc.  2008.  All rights reserved.

	Licensed under the Apache License, Version 2.0 (the "License"); 
	you may not use this file except in compliance with the License. 
	You may obtain a copy of the License at 
	
	http://www.apache.org/licenses/LICENSE-2.0 
	
	Unless required by applicable law or agreed to in writing, software 
	distributed under the License is distributed on an "AS IS" BASIS, 
	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
	See the License for the specific language governing permissions and 
	limitations under the License.


	Front end to chart servlet.
	
	2008/09/17  WHF  Created.
	2008/09/29  WHF  Added dynamic select box.
-->

<html>
<head>
	<title>WebPlot: Web Based Data Viewer for DataTurbine</title>
	<link rel="stylesheet" href="/stylesheets/rbnbstyles.css" type="text/css">
	<script language="javascript"><!--
		function updateChart()
		{
			df = document.dataForm;
			var ids = document.getElementById("idChannelSelect"); 
			if (document.getElementById("select").checked)
				// More IE insanity.
				channel = //ids.value;
						ids.options[ids.selectedIndex].text;
			else
				channel = df.channelText.value;
			
			s = "chart?channel=".concat(channel)
					.concat("&time=").concat(df.time.value)
					.concat("&duration=").concat(df.duration.value)
					.concat("&reference=").concat(df.reference.value)
					.concat("&width=").concat(df.width.value)
					.concat("&height=").concat(df.height.value);
						
			document.getElementById("chartUrl").innerHTML = 
					document.URL.substring(0, document.URL.lastIndexOf('/')+1).concat(s);
			document.chart.src = s.concat(
					'&nocache='.concat(new Date().getTime())
			);
			return false;
		}
		function calcNow()
		{
			d = new Date();
			// Convert from milliseconds to seconds for RBNB time:
			document.dataForm.time.value = d.getTime() / 1000.0;
			updateChart();
		}
		function channelChange(rid)
		{
			document.getElementById(rid).click();
			updateChart();
		}
		function getKeyCode(e)
		{
			if(window.event) { // IE
				keynum = e.keyCode
			} else if(e.which) { // Netscape/Firefox/Opera
				keynum = e.which
			}
			
			return keynum;
		}
		function onChannelTextKey(event)
		{
			if (getKeyCode(event)==13) {
				channelChange('text');
				return false; 
			}
			return true;
		}

		function refChange()
		{
			if (document.dataForm.reference.value == "absolute")
				document.dataForm.now.disabled = false;
			else document.dataForm.now.disabled = true;
		}				
		
		// To support Firefox, had to make global:
		var client;
		function handler()
		{
			switch (client.readyState) {
				case 4:
				// The insanity below is to support IE:
				document.getElementById("idChannelSelect").innerHTML=""+
						client.responseText;
				document.getElementById("idChannelSelect").outerHTML =
						document.getElementById("idChannelSelect").outerHTML;
				updateChart();				
				break;
			}
		}
		
		function refreshList()
		{
			client = new XMLHttpRequest();
			client.onreadystatechange = handler;
			var d = new Date();
			client.open("GET", "fillSelect.jsp?i="+d.getTime());
			client.send("dummy text for firefox");
		}
		
	--></script>		

</head>
<body onLoad="refreshList(); ">
	<h1>WebPlot: Web Based Data Viewer for DataTurbine</h1>
	<center>
	<p><img name="chart" src="chart?duration=1.0" /></p>
	<table><tr>
		<td class="smaller">URL: </td>
		<td id="chartUrl" class="smaller"> </td>
	</tr></table>
	<form name="dataForm" onSubmit="return updateChart();">
		<table cols=2>
			<tr><td>Channel: </td><td><table><tr>			
				<td><input type="radio" checked name="cSelType" id="select" 
						onClick="updateChart();" /></td>
				<td id="selectHTML">
				<select name="channelSelect" id="idChannelSelect"
						onChange="channelChange('select');" >
					<option>rbnbSource/c0</option>
					<option>rbnbSource/c1</option>
				</select>
				</td>
				<td><input type="button" name="refreshListButton"
						onClick="refreshList(); return false;"
						value="Refresh List" /></td>
			</tr></table></td></tr>
			<tr><td>&nbsp; </td><td><table><tr> 
				<td><input type="radio" name="cSelType" id="text" 
						onClick="updateChart();" /></td>
				<td><input name="channelText" value="rbnbSource/c0" 
						onKeyPress="return onChannelTextKey(event);"	
						onChange="channelChange('text');" /></td>
			</tr></table></td></tr>
			<tr>
				<td>Start: </td>
				<td><input name="time" value="0.0" />
				<input type="button" name="now" onClick="calcNow(); return false;"
						value="Now" disabled="true" />
				</div></td>
			</tr>
			<tr><td>Duration:</td><td>
				<input name="duration" value="1.0" />
			</td></tr>
			<tr>
				<td>Reference:</td>
				<td>
					<select name="reference" onChange="refChange();" >
						<option value="absolute">Absolute </option>
						<option selected value="newest">Newest</option>
						<option value="oldest">Oldest</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>Graph width:</td>
				<td><input name="width" value="320" /></td>
			</tr>
			<tr>
				<td>Graph height:</td>
				<td><input name="height" value="240" /></td>
			</tr>			
			<tr><td colspan=2>
				<div class="centered">
					<input type="submit" value="Update Plot" />
				</div>
			</td></tr>
		</table>			
	</form>
	</center>
</body>
</html>
